<template>
  <div class="pay-success">
    <h2>支付成功！</h2>
    <p>感谢您的购买，订单号：{{ orderNo }}</p>
    <el-button type="primary" @click="viewOrder">查看订单</el-button>
    <el-button @click="$router.push('/shop')">返回商城</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const orderNo = ref('')

onMounted(() => {
  orderNo.value = route.query.order_no || ''
  localStorage.setItem('refreshCart', 'true')
})

const viewOrder = () => {
  if (!orderNo.value) return
  router.push({ name: 'orderDetail', query: { order_no: orderNo.value } })
}
</script>

<style scoped>
.pay-success {
  max-width: 500px;
  margin: 80px auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
  padding: 48px 32px;
  text-align: center;
}
</style>
